<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>我的</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">

	<link rel="stylesheet" href="../css/mui.min.css">
	<script src="../js/flexible.js" type="text/javascript" charset="utf-8"></script>
	<style>
		html,
		body {
			background-color: #f6f6f6;
			min-height: 100vh;
			font-size: 0.373rem;
		}

		ul,
		ol {
			list-style: none;
		}

		body input[type='text'],
		ul,
		li {
			padding: 0;
			margin: 0;
		}

		.clear {
			clear: both;
			height: 0;
			font-size: 0;
			line-height: 0;
			visibility: hidden;
			overflow: hidden;
		}

		.mui-bar-tab .mui-tab-item.mui-active {
			color: #888888;
		}

		.nav-active span {
			color: #1c83fc;
		}
		/*顶部*/

		.my_top {
			height: 4.57rem;
			background: url(../images/my_bg.png) no-repeat;
			background-size: 100% 100%;
		}

		.my_topz {
			padding: 1.16rem 0.493rem 0;
			display: flex;
		}

		.my_top_tx {
			background: url(../images/my_txbg.png) no-repeat;
			background-size: 100% 100%;
			width: 1.933rem;
			height: 1.933rem;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.my_top_zi {
			padding-left: 0.466rem;
		}

		.my_top_tx img {
			height: 1.53rem;
			width: 1.53rem;
			border-radius: 50%;
		}

		.my_login {
			display: inline-block;
			padding: 0.05rem 0.2rem;
			background: rgba(0, 0, 0, 0.6);
			border-radius: 0.3rem;
			color: #fff;
			font-size: 0.32rem;
		}

		.my_login a {
			color: #fff;
		}

		.my_login img {
			width: 100%;
			height: 100%;
		}

		.my_top_name h3 {
			color: #fff;
			line-height: 0.9rem;
			font-size: 0.459rem;
		}

		.my_top_nameh3 {
			display: flex;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.my_top_nameh3 img {
			height: 0.453rem;
			width: 0.453rem;
			margin-left: 0.4rem;
		}

		.my_lie {
			padding: 0.44rem 0.386rem;
			padding-bottom: 1.6rem;
			border-radius: 0.1rem;
		}

		.my_lie_li {
			display: flex;
			background: #fff;
			padding: 0.44rem 0.386rem;
			justify-content: space-between;
			line-height: 0.666rem;
			border-bottom: 1px solid #e2e2e2;
		}

		.my_lie_li h4 {
			font-size: 0.373rem;
			line-height: 0.666rem;
			margin: 0;
		}

		.my_li_left {
			display: flex;
		}

		.my_li_left i {
			background: url(../images/my_02.png) no-repeat;
			background-size: 100% 100%;
			height: 0.666rem;
			width: 0.666rem;
		}

		.my_li_left21 i {
			background: url(../images/my_07.png) no-repeat;
			background-size: 100% 100%;
		}

		.my_li_left2 i {
			background: url(../images/my_03.png) no-repeat;
			background-size: 100% 100%;
		}

		.my_li_left3 i {
			background: url(../images/my_04.png) no-repeat;
			background-size: 100% 100%;
		}

		.my_li_left4 i {
			background: url(../images/my_05.png) no-repeat;
			background-size: 100% 100%;
		}

		.my_li_left5 i {
			background: url(../images/my_06.png) no-repeat;
			background-size: 100% 100%;
		}

		.my_li_right {
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.my_li_right i {
			background: url(../images/my_01.png) no-repeat;
			background-size: 100% 100%;
			height: 0.306rem;
			width: 0.186rem;
		}

		.my_li_right h4 {
			color: #888888;
			padding-right: 0.36rem;
		}

		.my_li_left h4 {
			padding-left: 0.36rem;
			color: #353535;
		}

		.my_content {
			background: #f6f6f6;
		}

		.my_li_right a {
			display: flex;
			align-items: center;
		}

		.my_order_name i {
			background: url(../images/my_01.png) no-repeat;
			background-size: 100% 100%;
			height: 0.306rem;
			width: 0.186rem;
		}

		.my_order_name {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #eeeeee;
			line-height: 0.866rem;
			padding: 0 0.4rem;
		}

		.my_order {
			background: #FFFFFF;
			margin: 0 0.4rem;
			margin-top: -1.3rem;
			box-shadow: 0 0.03rem 0.1rem #dadada;
			border-radius: 0.1rem;
		}

		.my_order_name h4 {
			font-size: 0.373rem;
			margin: 0;
			line-height: 0.866rem;
		}

		.my_order_ul {
			display: flex;
		}

		.my_order_ul li {
			width: 25%;
			text-align: center;
			display: flex;
			flex-direction: column;
			padding: 0.32rem 0;
			font-size: 0.293rem;
		}

		.my_order_ul li img {
			width: 0.666rem;
			height: 0.666rem;
			display: inline-block;
			margin: 0 auto;
		}

		.my_order_ul li span {
			line-height: 0.64rem;
		}

		.my_topshopz {
			padding: 0.666rem 0.493rem 0;
			display: flex;
			justify-content: space-between;
		}

		.my_topshopz_allleft {
			display: flex;
		}

		.wyshop_denglu {
			color: #fff;
			line-height: 0.9rem;
			padding: 0.1rem 0;
		}
	</style>
</head>

<body>
	<!--顶部-->
	<header class="mui-bar mui-bar-nav">
		<!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>-->
		<h1 class="mui-title">我的</h1>
	</header>
	<div class="my_content mui-content" id="app">
		<div class="my_top">
			<div class="my_topz" @click="edit_user_info">
				<div class="my_top_tx">
					<img :src="user.head?user.head:'../images/user_defult.jpg'" />
				</div>
				<div class="my_top_zi">
					<div class="my_top_name">
						<div class="my_top_nameh3">
							<h3>{{user.nickname}}</h3>
							<img v-if="logontype == true" src="../images/my_bianji.png">
						</div>
						<div class="my_login" id="login_stats" v-if="logontype == true">
							已登录
						</div>
						<div class="my_login" id="login_stats" v-if="logontype == false">
							<a>登录/注册</a>

						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="my_order">
			<div class="my_order_name">
				<h4>我的订单</h4>
				<i></i>
			</div>
			<ul class="my_order_ul">
				<li onclick="go_page('order_list.html?status=1')">
					<img src="../images/myshop_01.png" />
					<span>待付款</span>
				</li>
				<li onclick="go_page('order_list.html?status=2')">
					<img src="../images/myshop_02.png" />
					<span>待发货</span>
				</li>
				<li onclick="go_page('order_list.html?status=3')">
					<img src="../images/myshop_03.png" />
					<span>待收货</span>
				</li>
				<li onclick="go_page('order_list.html?status=4')">
					<img src="../images/myshop_04.png" />
					<span>已完成</span>
				</li>
				<li onclick="go_page('shouhou.html')">
					<img src="../images/back_mony.png" />
					<span>退款/售后</span>
				</li>
			</ul>
		</div>
		<div class="my_lie">
			<ul>
				<li class="my_lie_li" v-show="user.account_type=='phone'" @click="go_page('my_login.html')">
					<div class="my_li_left my_li_left1" >
						<i></i>
						<h4>修改绑定手机</h4>
					</div>
					<div class="my_li_right">
						<i></i>
					</div>
				</li>
				<li class="my_lie_li" @click="go_page('group_order_list.html')">
					<div class="my_li_left my_li_left21">
						<i></i>
						<h4>我的拼团</h4>
					</div>
					<div class="my_li_right">

						<i></i>

					</div>
				</li>
				<li class="my_lie_li" @click="go_page('my_shequ.html')">
					<div class="my_li_left my_li_left2">
						<i></i>
						<h4>我的社区</h4>
					</div>
					<div class="my_li_right">

						<i></i>

					</div>
				</li>
				<li class="my_lie_li" @click="go_page('collect_goods.html')">
					<div class="my_li_left my_li_left3">
						<i></i>
						<h4>我的收藏</h4>
					</div>
					<div class="my_li_right">
						<i></i>
					</div>
				</li>
				<li class="my_lie_li" @click="go_page('address_list.html')">
					<div class="my_li_left my_li_left4">
						<i></i>
						<h4>我的地址</h4>
					</div>
					<div class="my_li_right">
						<i></i>
					</div>
				</li>
				<li class="my_lie_li" @click="go_page('my_setup.html')">
					<div class="my_li_left my_li_left5">
						<i></i>
						<h4>设置</h4>
					</div>
					<div class="my_li_right">

						<i></i>

					</div>
				</li>
			</ul>
		</div>
	</div>
	<nav class="mui-bar mui-bar-tab nav-bar-index">
		<a class="mui-tab-item" href="index.html">
			<span class="mui-icon">
				<img src="../images/index-01.png" />
			</span>
			<span class="mui-tab-label">社区首页</span>
		</a>
		<a class="mui-tab-item" href="sqgc_list.html">
			<span class="mui-icon">
				<img src="../images/index-02.png" />
			</span>
			<span class="mui-tab-label">社区广场</span>
		</a>
		<a class="mui-tab-item" href="shop_home.html">
			<span class="mui-icon">
				<img src="../images/index-03.png" />
			</span>
			<span class="mui-tab-label">社区商城</span>
		</a>
		<a class="mui-tab-item nav-active" href="my.html">
			<span class="mui-icon">
				<img src="../images/index-04-hove.png" />
			</span>
			<span class="mui-tab-label">我的</span>
		</a>
	</nav>
	<script src="../js/mui.min.js"></script>

</body>

</html>
<script src="../js/js.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery.min.js"></script>
<script src="../js/host.config.js"></script>
<script src="../js/tools/util.js"></script>
<script type="text/javascript">
	var vue = new Vue({
		el: "#app",
		data: {
			user: '',
			logontype: false
		},
		methods: {
			edit_user_info: function () {
				if (this.logontype) {
					mui.openWindow("edit_user_info.html", "edit_user_info.html")
				} else {
					mui.openWindow('logn.html', 'logn.html')
				}
			},
			go_page: function (page) {
				if (this.user) {
					mui.openWindow(page, page)
				} else {
					mui.toast("未登录，请先登录")
				}
			}
		},
		mounted: function () {
			//mui初始化
			mui.init({
				beforeback: function () { //监听物理返回按键的方法
					console.log('触发了  返回键')　　　　　　
					mui.openWindow({
						url: 'index.html',
						id: 'idnex.html',
						show: {
							autoShow: true, //页面loaded事件发生后自动显示，默认为true
							aniShow: "slide-in-left", //页面显示动画，默认为”slide-in-right“；
						},
					});
					return false;
				}
			});
			mui('.mui-bar-tab').on('tap', '.mui-tab-item', function () {
				mui.openWindow(this.href, this.href)
			})
			var user = get_user_info();
			console.log("get_user_info-->", JSON.stringify(user))
			if (user) {
				this.user = user;
				this.logontype = true;
			} else {
				mui.toast("未登录");
			}
		}
	})
	function go_page(url) {
		mui.openWindow(url, url)
	}
	mui.plusReady(function () {
		setTimeout(function () {
			console.log('开始清离后台多余页面')
			var curr = plus.webview.currentWebview();
			var wvs = plus.webview.all();
			for (var i = 0, len = wvs.length; i < len; i++) {
				//关闭其他页面
				if (wvs[i].getURL() == curr.getURL() || wvs[i].getURL().match("shop_list_class"))
					continue;
				plus.webview.close(wvs[i], 'none');
				console.log('关闭了:' + wvs[i].getURL())
			}
		}, 1000)
	})
</script>
